<script setup lang="ts">
import type { Component } from "vue";

import type { ThemeModeType } from "@vben/types";

import { MoonStar, Sun, SunMoon } from "@vben/icons";
import { $t } from "@vben/locales";

import SwitchItem from "../switch-item.vue";

defineOptions({
  name: "PreferenceTheme",
});

const modelValue = defineModel<string>({ default: "auto" });
const themeSemiDarkSidebar = defineModel<boolean>("themeSemiDarkSidebar");
const themeSemiDarkHeader = defineModel<boolean>("themeSemiDarkHeader");

const THEME_PRESET: Array<{ icon: Component; name: ThemeModeType }> = [
  {
    icon: Sun,
    name: "light",
  },
  {
    icon: MoonStar,
    name: "dark",
  },
  {
    icon: SunMoon,
    name: "auto",
  },
];

function activeClass(theme: string): string[] {
  return theme === modelValue.value ? ["outline-box-active"] : [];
}

function nameView(name: string) {
  switch (name) {
    case "auto": {
      return $t("preferences.followSystem");
    }
    case "dark": {
      return $t("preferences.theme.dark");
    }
    case "light": {
      return $t("preferences.theme.light");
    }
  }
}
</script>

<template>
  <div class="flex w-full flex-wrap justify-between">
    <template v-for="theme in THEME_PRESET" :key="theme.name">
      <div
        class="flex cursor-pointer flex-col"
        @click="modelValue = theme.name"
      >
        <div
          :class="activeClass(theme.name)"
          class="outline-box flex-center py-4"
        >
          <component :is="theme.icon" class="mx-9 size-5" />
        </div>
        <div class="text-muted-foreground mt-2 text-center text-xs">
          {{ nameView(theme.name) }}
        </div>
      </div>
    </template>

    <SwitchItem
      v-model="themeSemiDarkSidebar"
      :disabled="modelValue === 'dark'"
      class="mt-6"
    >
      {{ $t("preferences.theme.darkSidebar") }}
    </SwitchItem>
    <SwitchItem v-model="themeSemiDarkHeader" :disabled="modelValue === 'dark'">
      {{ $t("preferences.theme.darkHeader") }}
    </SwitchItem>
  </div>
</template>
